<template>
	<el-container>
		<el-header>
			<el-row :gutter="20">
				<el-col :span="4">
					<img class="logo" src="../assets/logo.png" />
				</el-col>
				<el-col :span="16"><h2>后台系统</h2></el-col>
				<el-col :span="4">
					<el-dropdown>
						<span class="el-dropdown-link">
							设置
							<el-icon class="el-icon--right">
								<arrow-down />
							</el-icon>
						</span>
						<template #dropdown>
							<el-dropdown-menu>
								<el-dropdown-item>个人中心</el-dropdown-item>
								<el-dropdown-item @click="exit">退出</el-dropdown-item>
							</el-dropdown-menu>
						</template>
					</el-dropdown>
				</el-col>
			</el-row>
		</el-header>
		<el-container>
			<el-aside width="200px">
				<el-menu
					router
					active-text-color="#ffd04b"
					background-color="#545c64"
					class="el-menu-vertical-demo"
					:default-active="active"
					text-color="#fff"
				>
					<el-menu-item v-for="i in list" :key="i.path" :index="i.path">
						<el-icon><icon-menu /></el-icon>
						<span>{{ i.meta.title }}</span>
					</el-menu-item>
				</el-menu>
			</el-aside>
			<el-main>
				<router-view></router-view>
			</el-main>
		</el-container>
	</el-container>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { useRoute, useRouter } from 'vue-router'
// import Cookie from 'js-cookie'

export default defineComponent({
	name: 'HomeView',
	setup() {
		const router = useRouter()
		const route = useRoute()

		const list = router.getRoutes().filter((v) => v.meta.isShow)

		const exit = () => {
			let token = localStorage.getItem('token')
			token = ''
			// Cookie.remove('token')
			router.push('login')
		}

		return {
			list,
			active: route.path,
			exit
		}
	}
})
</script>

<style lang="scss" scoped>
.el-header {
	height: 80px;
	background-color: #545c64;
}
.logo {
	height: 80px;
}
h2 {
	text-align: center;
	color: #fff;
	height: 80px;
	line-height: 80px;
}
.el-dropdown {
	font-size: 23px;
	text-align: center;
	height: 80px;
	line-height: 80px;
	color: rgb(214, 136, 149);
	cursor: pointer;
}

.el-aside {
	.el-menu {
		height: calc(100vh - 80px);
	}
}
</style>
